<template>
	<view class="">
		<view class="con" v-if="is_preson=='无'">
			<u-navbar title="合伙人" leftIconColor='#fff' titleStyle='color:#fff;' @rightClick="rightClick"
				bgColor='transparent' :autoBack="true"></u-navbar>
			<image class="bg" src="/pages/my/static/hhrgb.png" mode=""></image>
			<view class="box">
				<view class="form">
					<view class="form_title flex">
						<view class="dian">

						</view>
						<view class="title_name">
							申请信息
						</view>
						<view class="dian">

						</view>
					</view>
					<view class="form_box">
						<view class="input">
							<u--input placeholder="请输入真实姓名" border="none" v-model="form.name" fontSize='31rpx'
								placeholderStyle='color:#A9A9A9'>
							</u--input>
						</view>
						<view class="input">
							<u--input placeholder="请输入手机号" border="none" v-model="form.phone" fontSize='31rpx'
								placeholderStyle='color:#A9A9A9'>
							</u--input>
						</view>
					</view>
					<view class="xieyi flex">
						<view class="checkbox" @click="ischeck=!ischeck">
							<image v-if="ischeck" class="checkicon" src="/static/img/shopcar/gou.png" mode=""></image>
						</view>
						<view class="lable">
							你已经阅读并同意
							<text style="color: #FE700A;">《合伙人申请协议》</text>
						</view>
					</view>
					<view class="btn_box flex">
						<view class="btn" @click="submit">
							提交申请
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="con" v-if="is_preson=='审核通过'">
			<view class="top">
				<u-navbar title="合伙人" leftIconColor='#fff' titleStyle='color:#fff;' @rightClick="rightClick"
					bgColor='transparent' :autoBack="true"></u-navbar>
				<image class="topbg" src="/pages/my/static/hhtpbg.png" mode=""></image>
				<view class="top_con">

					<view class="con_info flex">
						<view class="flex">
							<image class="avatar" :src="userinfo.avatar" mode=""></image>
							<view class="info_right">
								<view class="name">
									{{userinfo.username}}
								</view>
								<view class="Id">
									ID:{{userinfo.user_id}}
								</view>
							</view>
						</view>

					</view>
					<view class="numbox flex">
						<view class="num_item">
							<view class="num">
								{{userinfo.score_two}}
							</view>
							<view class="name">
								贡献值
							</view>
						</view>
						<view class="num_line">

						</view>
						<view class="num_item">
							<view class="num">
								{{userinfo.score}}
							</view>
							<view class="name">
								通证收益
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list_title">
				我的团队
			</view>
			<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="scrolltolower">
				<view class="friendlist">
					<view class="frienditem flex" v-for="(item,index) in friendlist" :key="index">
						<image class="avatar" v-if="item.type=='1'" src="/static/img/tongz/zs.png" mode=""></image>
						<image class="avatar" v-if="item.type=='2'" src="/static/img/tongzhi/zs.png" mode=""></image>
						<view class="right flex">
							<view class="rl">
								<view class="name">
									{{item.reason}}
								</view>
								<view class="time">
									{{item.createtime}}
								</view>
							</view>
							<view class="rr flex">
								+{{item.value}}
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" @loadmore="scrolltolower" />
			</scroll-view>
		</view>
		<view class="" v-if="is_preson=='待审核'">
			<u-navbar title="合伙人" leftIconColor='#333' titleStyle='color:#333;' @rightClick="rightClick"
				:autoBack="true"></u-navbar>
			<view class=""
				style="margin-top: 200rpx;display: flex;align-items: center;flex-direction: column;font-size: 40rpx;">
				<image style="width: 200rpx;height: 200rpx;margin-bottom: 20rpx;" src="/static/img/my/examine.png"
					mode=""></image>
				您提交的申请正在审核中~
			</view>
		</view>

	</view>

</template>

<script>
	import {
		submitperson,
		getAllScore
	} from '@/api/my.js'
	export default {
		data() {
			return {
				form: {
					name: '',
					phone: ''
				},
				ischeck: false,
				friendlist: [],
				is_preson: '',
				userinfo: {},
				page: 1,
				last_page: 1,
				status: 'loadmore'
			};
		},
		methods: {
			submit() {
				let {
					name,
					phone
				} = this.form
				if (!name) {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none'
					})
					return
				}
				if (!phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return
				}
				if (!this.ischeck) {
					uni.showToast({
						title: '请勾选已阅读协议',
						icon: 'none'
					})
					return
				}
				submitperson(this.form).then((res => {
					// console.log(res)
					if (res.data.code == 1) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}))
			},
			getdata() {
				this.status = 'loading'
				getAllScore({
					team: 2,
					page: this.page,
					sorce:1
				}).then(res => {
					// console.log(res)
					this.status = 'loadmore'
					this.last_page = res.data.data.last_page
					this.friendlist = [...this.friendlist, ...res.data.data.data]
					if (this.friendlist.length == 0) this.status = 'nomore'
				})
			},
			scrolltolower() {
				this.page++
				if (this.page <= this.last_page) {
					this.getdata()
				} else {
					this.status = 'nomore'
				}
			}
		},
		onLoad(option) {
			this.is_preson = option.is_preson
			this.userinfo = uni.getStorageSync('userinfo')
			this.getdata()
		}
	}
</script>

<style lang="less">
	.n {
		background-color: transparent;
	}

	.con {
		height: 100vh;
		// background-image: url('/static/img/my/hhrgb.png');
		position: relative;
		padding-bottom: -3px;

		.bg {
			width: 100%;
			height: 100vh;
		}

		.box {
			width: 686rpx;
			height: 664rpx;
			background: #FFA63D;
			box-shadow: 0px 0px 27rpx 0px rgba(177, 76, 6, 0.8);
			border-radius: 20rpx;
			position: absolute;
			bottom: 30rpx;
			left: 42rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.form {
				width: 665rpx;
				height: 638rpx;
				background: #FFFEFF;
				border-radius: 14rpx;

				.form_title {
					justify-content: center;
					padding-top: 40rpx;
					padding-bottom: 30rpx;

					.title_name {
						font-size: 38rpx;
						color: #FB710C;
						margin: 0 14rpx;
						font-weight: bold;
					}
				}

				.dian {
					width: 13rpx;
					height: 13rpx;
					border-radius: 50%;
					background: #FB710C;
				}

				.form_box {
					padding: 0 62rpx;

					.input {
						padding: 30rpx 27rpx;
						border-radius: 8rpx;
						border: 1rpx solid #E6E7EA;
						margin-bottom: 23rpx;
					}
				}
			}
		}
	}

	.xieyi {
		padding: 22rpx 72rpx;
		font-size: 22rpx;
		color: #999999;

		.checkbox {
			width: 26rpx;
			height: 26rpx;
			border-radius: 50rpx;
			border: 1rpx solid #E6E7EA;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 16rpx;

			.checkicon {
				width: 26rpx;
				height: 26rpx;
			}
		}
	}

	.btn_box {
		width: 100%;
		justify-content: center;

		.btn {
			width: 537rpx;
			line-height: 99rpx;
			background: linear-gradient(-87deg, #FF8717, #FF5F00);
			border-radius: 50rpx;
			color: #fff;
			font-size: 36rpx;
			text-align: center;
			margin-top: 62rpx;
		}
	}


	.top {
		width: 750rpx;
		height: 544rpx;
		position: relative;

		.topbg {
			width: 750rpx;
			height: 544rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.top_con {
			width: 750rpx;
			height: 544rpx;
			position: absolute;
			top: 0;
			left: 0;

			.sharebox {
				width: 205rpx;
				line-height: 72rpx;
				background: linear-gradient(151deg, #FFD22B, #FFA304);
				border-radius: 36rpx;
				color: #fff;
				font-size: 30rpx;
				text-align: center;
			}

			.con_info {
				padding: 200rpx 33rpx 0 50rpx;
				justify-content: space-between;

				.avatar {
					width: 116rpx;
					height: 116rpx;
					border-radius: 50%;
					border: 4rpx solid #ffb575;
				}

				.info_right {
					color: #fff;
					margin-left: 24rpx;

					.name {
						font-size: 32rpx;
					}

					.Id {
						font-size: 24rpx;
						margin-top: 14rpx;
					}
				}
			}
		}
	}

	.numbox {
		justify-content: center;
		color: #fff;
		margin-top: 85rpx;
		text-align: center;

		.num {
			font-size: 40rpx;
		}

		.name {
			font-size: 26rpx;
		}

		.num_item {
			width: 400rpx;
		}

		.num_line {
			width: 2rpx;
			height: 37rpx;
			background: rgba(211, 214, 219, 0.38);
		}
	}

	.list_title {
		color: #3F3F3F;
		font-size: 34rpx;
		font-weight: bold;
		height: 40rpx;
		margin-top: 44rpx;
		margin-bottom: 10rpx;
		margin-left: 30rpx;
	}

	.friendlist {
		padding: 0 0 0 32rpx;

		.frienditem {
			align-items: flex-end;
			padding-top: 28rpx;
			border-bottom: 1rpx solid #F5F4F4;
		}

		.avatar {
			margin-right: 30rpx;
			width: 74rpx;
			height: 74rpx;
			align-self: flex-start;
		}

		.right {
			flex: 1;
			justify-content: space-between;

			padding-bottom: 30rpx;
			height: 74rpx;

			.rl {
				.name {
					font-size: 32rpx;
					color: #333333;
				}

				.time {
					font-size: 24rpx;
					color: #7A7878;
				}
			}

			.rr {
				color: #FB6419;
				font-size: 33rpx;
				font-weight: bold;
				padding-right: 30rpx;

				.jf_icon {
					width: 25rpx;
					height: 25rpx;
					margin-right: 7rpx;
				}

			}
		}
	}

	.scroll-view {
		height: calc(100vh - 544rpx - 40rpx - 44rpx - 10rpx - var(--status-bar-height));
	}
</style>
